<template>
  <div class="login">
    <div class="login__container">
      <div class="mb-20">
        <header class="text-center mb-20">Login</header>
        <el-form
          label-position="top"
          ref="formRef"
          label-width="100px"
          :model="form"
          class="w-300px">
          <el-form-item
            label="账号"
            prop="account"
            :rules="[
              {
                required: true,
                message: '必填',
                trigger: 'blur',
              },
              {
                type: 'string',
                message: '请输入正确的账号密码',
                trigger: ['blur', 'change'],
              },
            ]">
            <el-input v-model="form.account" />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            :rules="[{ required: true, message: '必填' }]">
            <el-input v-model="form.password" type="password" />
          </el-form-item>
          <el-form-item class="flex-1">
            <el-button type="primary" @click="submitForm(formRef)">
              登入
            </el-button>
            <el-button type="primary">注册</el-button>
            <div class="login__not-password flex-1 text-zinc-300">
              忘记密码？
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import Message from '@/components/Message'
// import { cryptoUtils } from 'wxt-utils'
import type { FormInstance } from 'element-plus'

const router = useRouter()
const form: Record<string, any> = reactive({
  account: '',
  password: '',
})

const formRef = ref<FormInstance>()
// const user_login = async () => {
//   try {
//     const data = await callApi.post('user_login', {
//       loginName: 'cs202104339',
//       password: cryptoUtils.AES.encrypt(form.password, {
//         mode: 'ECB',
//       }),
//       __login: true,
//     })

//     console.log(data)
//   } catch (error) {
//     console.log(error)
//   }
// }

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      // user_login()
      const account = 'admin'
      const password = 123456

      if (form.account == account && form.password == password) {
        localStorage.setItem('token', 'nasdnaoqwpeqiwepqe1')
        Message({ type: 'warn', text: '12313' })
        setTimeout(() => {
          router.push({ name: 'home' })
        }, 2000)
      }
      console.log('submit!', valid)
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  // background: orange;

  &__container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 350px;
  }

  &__not-password {
    display: flex;
    justify-content: flex-end;

    cursor: pointer;
  }
}
</style>
